<template>
  <p class="form-row-title" direction="horizontal">开摆吧总览</p>
  <van-grid :column-num="3">
    <van-grid-item
      v-for="(item, index) in homeData"
      :key="index"
      :icon="item.icon"
      :text="item.text"
      :badge="item.num"
      :to="item.url"
    />
  </van-grid>
</template>

<script setup>
import { ref, getCurrentInstance, onMounted } from "vue";
const { proxy } = getCurrentInstance();
const homeData = ref([]);
function getHome() {
  return proxy.$AllRequest.getHome().then((res) => {
    proxy.$homeOption = res.data;
    homeData.value = [
      {
        icon: "user-o",
        text: "会员数",
        num: proxy.$homeOption.users,
        url: "user",
      },
      {
        icon: "user-circle-o",
        text: "角色",
        num: proxy.$homeOption.roles,
        url: "role",
      },
      {
        icon: "flower-o",
        text: "分类",
        num: proxy.$homeOption.categories,
        url: "category",
      },
      {
        icon: "label-o",
        text: "贴吧",
        num: proxy.$homeOption.tb,
        url: "tb",
      },
      {
        icon: "notes-o",
        text: "贴子",
        num: proxy.$homeOption.articles,
        url: "article",
      },
      {
        icon: "smile-o",
        text: "逗逗",
        num: proxy.$homeOption.jokes,
        url: "joke",
      },
    ];
  });
}
onMounted(async () => {
  await getHome();
  console.log(proxy.$homeOption);
});
</script>

<style scoped>
</style>